<template>
  <z-paging ref="paging" :refresher-enabled="false" :loading-more-enabled="false">
    <view w-full pa-20rpx box-border>
      <view w-full bg-white rounded-20rpx mb-20rpx>
        <view bg="#FCC300" h-80rpx flex items-center pl-20rpx rounded-t-20rpx>
          <image w-30rpx h-30rpx mr-20rpx src="@/pages/exam/static/user.png"></image>
          <view text-28rpx>用户信息</view>
        </view>
        <view w-full py-40rpx px-20rpx flex items-center justify-between box-border>
          <view>
            <image w-120rpx h-120rpx rounded-full mr-20rpx :src="userInfo.face"></image>
            <view text-28rpx mt-36rpx>
              <view mb-14rpx font-bold>账号：{{ userInfo.mobile }}</view>
              <view text="#7D7D7D">姓名：{{ userInfo.nickName }}</view>
            </view>
          </view>
          <view
            w-190rpx
            h-190rpx
            rounded-40rpx
            relative
            flex
            justify-center
            items-center
            style="border: 2rpx solid #fcc300">
            <view flex items-end justify-center>
              <view text-60rpx font-800>{{ count }}</view>
              <view text-28rpx mb-10rpx>/次</view>
            </view>
            <view text="#7D7D7D" text-24rpx absolute bottom-20rpx right-30rpx>练习次数</view>
          </view>
        </view>
      </view>
      <!-- <view flex justify-between items-center mb-20rpx>
        <view flex flex-col justify-center items-center bg-white rounded-20rpx w-170rpx h-170rpx>
          <text text-40rpx font-500 mb-16rpx>821</text>
          <text text-24rpx text="#7D7D7D">未答题</text>
        </view>
        <view flex flex-col justify-center items-center bg-white rounded-20rpx w-170rpx h-170rpx>
          <text text-40rpx font-500 mb-16rpx>60</text>
          <text text-24rpx text="#7D7D7D">已答题</text>
        </view>
        <view flex flex-col justify-center items-center bg-white rounded-20rpx w-170rpx h-170rpx>
          <text text-40rpx font-500 mb-16rpx>60</text>
          <text text-24rpx text="#7D7D7D">错题</text>
        </view>
        <view flex flex-col justify-center items-center bg-white rounded-20rpx w-170rpx h-170rpx>
          <text text-40rpx font-500 mb-16rpx>80%</text>
          <text text-24rpx text="#7D7D7D">正确率</text>
        </view>
      </view> -->
      <view bg-white rounded-20rpx pb-20rpx>
        <view flex items-center h-100rpx pl-20rpx mb-10rpx>
          <image w-30rpx h-30rpx mr-20rpx src="@/pages/exam/static/tiku.png"></image>
          <view text-28rpx>题库</view>
        </view>
        <nut-collapse rounded-20rpx v-model="activeName" accordion>
          <nut-collapse-item :name="1">
            <template v-slot:title>
              <view>
                <view text="#7D7D7D" :class="{ 'text-black': tikuActive }">{{tikuActive ? tikuList.find((item: any) => item.id === tikuActive).name : '请选择题库后开始练习'}}</view>
              </view>
            </template>
            <view bg="#F8F8F8" rounded-20rpx w-full box-border pa-16rpx>
              <view
                v-for="(item, index) in tikuList"
                :key="index"
                h-90rpx
                box-border
                px-22rpx
                flex
                items-center
                rounded-20rpx
                :class="{ 'bg-white': tikuActive === item.id }"
                @click="tikuActive = item.id; activeName = -1;">
                {{ item.name }}
              </view>
            </view>
          </nut-collapse-item>
        </nut-collapse>
      </view>
    </view>
    <template #bottom>
      <view w-full px-40rpx box-border pb-46rpx pt-20rpx>
        <view
          w-670rpx
          h-100rpx
          rounded-50rpx
          bg="#FCC300"
          flex
          justify-center
          items-center
          font-500
          text="#000"
          text-28rpx
          @click="toExerPaper">
          开始练习
        </view>
      </view>
    </template>
  </z-paging>
</template>

<script setup lang="ts">
import { selectExmQuestionTypeList, selectExmQuestionTypeCount } from '@/api/examStudy'
import { onLoad, onShow } from '@dcloudio/uni-app'
import storage from '@/utils/storage'
const userInfo = ref<any>({
  face: ''
})
const count = ref(0) // 练习次数
const activeName = ref(-1)
const tikuActive = ref<any>('')
const tikuList = ref<any>([])
function gettExmQuestionTypeList() {
  selectExmQuestionTypeList().then((res: any) => {
    tikuList.value = res.data.result
  })
}
function toExerPaper() {
  if (!tikuActive.value) {
    uni.showToast({ title: '请选择题库', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: `/pages/exam/exerPaper?id=${tikuActive.value}&type=2`
  })
}
function getQuestionTypeCount() {
  selectExmQuestionTypeCount().then((res: any) => {
    count.value = res.data.result
  })
}
onMounted(() => {})
onLoad((options: any) => {
  userInfo.value = storage.getUserInfo() || {}
  console.log('userInfo', storage.getUserInfo())
  gettExmQuestionTypeList()
  getQuestionTypeCount()
})
</script>
<style lang="scss">
page {
  --nut-collapse-wrapper-content-padding: 0 20rpx;
  .nut-collapse-item__title {
    background-color: #eeeeee !important;
    color: #7d7d7d;
    border-radius: 20rpx !important;
    width: 668rpx !important;
    margin-left: 20rpx !important;
  }
}
</style>
<style scoped lang="scss"></style>
